<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>搜索</title>
		<link rel="stylesheet" href="./css/reset.css">
		<link rel="stylesheet" href="./css/common.css">
		<link rel="stylesheet" href="./fonts/iconfont.css">
		<link rel="stylesheet" href="./css/header.css">
		<script src="./js/jquery.min.js"></script>
		<script src="./js/common.js"></script>
	</head>
	<body>
		<div class="tops">
			<div class="info">
				<div class="divs">欢迎来到歌必网-咖啡综合专属服务平台~</div>
				<div class="divs">客服热线 17521209352</div>
			</div>
		</div>
		<div class="navigation">
			<div class="infos">
				<div class="lefts">
					<h1 class="logo">
						<a href="./index.html">
							<img src="./img/member/page-logo.png" alt="">
							<span>歌必网</span>
						</a>
					</h1>
					<nav class="nav_list">
						<div class="none">
							<a href="./index.html">首页</a>
						</div>
						<div class="none">
							<a href="./news.html">咨讯</a>
						</div>
						<div class="none">
							<a href="./lnsights.html">洞见</a>
						</div>
						<div class="none">
							<a href="./forums.html">讲堂</a>
						</div>
						<div class="none">
							<a href="./aMarket.html">市集</a>
						</div>
						<div class="none">
							<a href="./seryiceList.html">服务</a>
						</div>
						<div class="none">
							<a href="./community.html">社区</a>
						</div>
					</nav>
				</div>
				<div class="rihts">
					<img class="imgs" src="./img/all_sach.png" alt="" srcset="" />
					<div class="login_none">
						<a class="btn" href="./login.html">注册/登录</a>
					</div>
					<div class="login_adready">
						<a href="./member/uesrInfo.html">
							<img src="./img/all_tou.png" alt="" class="login_aready">
						</a>
						<div class="login_info" style="z-index: 999;">
							<div class="inner_info">
								<div class="head_img_box">
									<a href="./member/uesrInfo.html"><img src="./img/all_tou.png" alt="" class="head_img"></a>
									<div class="himg_right">
										<p class="name_box">
											<span class="name">再吃亿口</span> <span class="user_tab">暂未开通</span>
										</p>
										<p class="phone">15100743385</p>
									</div>
								</div>
								<ul class="menus vips">
									<li class="items">
										<a href="#" class="vip_btn"><i class="iconfont icon-huiyuan"></i>vip中心</a>
									</li>
								</ul>
								<ul class="menus">
									<li class="items">
										<a href="./member/myOrder.html"><i class="iconfont icon-shangpindingdan"></i>商品订单</a>
									</li>
									<li class="items">
										<a href="./member/myCourse.html"><i class="iconfont icon-wodekecheng"></i>我的课程</a>
									</li>
									<li class="items">
										<a href="./member/taskOrder.html"><i class="iconfont icon-dingdanrenwu"></i>任务订单</a>
									</li>
									<li class="items">
										<a href="./member/friendVerification.html"><i class="iconfont icon-tianjiahaoyou"></i>好友验证</a>
									</li>
								</ul>
								<ul class="menus other">
									<li class="items">
										<a href="./member/uesrInfo.html"><i class="iconfont icon-shezhi"></i>账号设置</a>
									</li>
									<li class="items">
										<a href="#" class="login_out"><i class="iconfont icon-tuichudenglu"></i>退出登录</a>
									</li>
								</ul>
							</div>
				
						</div>
					</div>
					<i class="iconfont icon-gengduo more"></i>
				</div>
			</div>
		</div>
		<div class="searchBorder">
			<input type="text" placeholder="搜索产品......" />
			<img id="jump" src="./img/all_sach.png" alt="" srcset="" />
		</div>
		<div class="shopInfo">
			<div class="title">热门推荐</div>
		</div>
		<div class="infos">			
			<div class="infosItems">
				<a href="./productDetails.html">
					<img src="./img/shops.png" alt="" />
					<div class="nikeName">HUAWEI Mate XT 非凡大师</div>
				</a>
			</div>
			<div class="infosItems">
				<a href="./productDetails.html">
					<img src="./img/shops.png" alt="" />
					<div class="nikeName">HUAWEI Mate XT 非凡大师</div>
				</a>
			</div>
			<div class="infosItems">
				<a href="./productDetails.html">
					<img src="./img/shops.png" alt="" />
					<div class="nikeName">HUAWEI Mate XT 非凡大师</div>
				</a>
			</div>
		</div>
		<div class="shopInfo">
			<div class="title">快速预览</div>
		</div>
		<div class="alj">
			<a href="./news.html" class="textS">
				咨讯
			</a>
			<a href="./lnsights.html" class="textS">
				洞见
			</a>
			<a href="./forums.html" class="textS">
				讲堂
			</a>
			<a href="aMarket.html" class="textS">
				市集
			</a>
			<a href="./seryiceList.html" class="textS">
				服务
			</a>
		</div>
	</body>
</html>
<script>
	$('#jump').on('click', function() {
		console.log('点击了搜索')
		window.location.href = './index.html';
	})
</script>
<style type="text/css">
	.searchBorder{
		width: calc(100% - 60rem);
		margin: 10rem auto 0;
		height: 4.5rem;
		border: 1px solid rgba(0, 0, 0, 0.2);
		font-weight: 400;
		color: #000;
		border-radius: 2.25rem;
		display: flex;
		align-items: center;
	}
	.searchBorder input{
		background: rgba(0, 0, 0, 0);
		flex: 1;
		margin-left: 2rem;
		height: 4.5rem;
		outline: none;
		border: none;
		/* padding: 1.25rem 5rem 1.25rem 2rem; */
		margin-right: 2rem;
		font-weight: 400;
		font-size: 1.5rem;
		color: #000;
	}
	.searchBorder img{
		width: 2.7rem;
		height: 2.7rem;
		margin-right: 2rem;
		cursor: pointer;
	}
	.shopInfo{
		width: calc(100% - 60rem);
		margin: 5rem auto 0;
	}
	.shopInfo .title{
		color: gray;
		font-size: 1.3rem;
	}
	.infos{
		width: calc(100% - 60rem);
		margin: 1rem auto 0;
		display: flex;
		align-items: center;
		gap: 3rem;
	}
	.infosItems{
		width: calc((100% - 6rem) / 3);
	}
	.infosItems img{
		width: 100%;
	}
	.infosItems .nikeName{
		margin-top: 1.5rem;
		font-weight: 700;
		color: #000;
		font-size: 1.3rem;
	}
	.alj{
		width: calc(100% - 60rem);
		margin: 1rem auto 0;
		display: flex;
		align-items: center;
		gap: 1.5rem 3rem;
	}
	.textS{
		cursor: pointer;
		display: block;
		width: calc((100% - 6rem) / 3);
		font-size: 1.375rem;
		line-height: 2.125rem;
		color: gray;
	}
	@media screen and (max-width: 768px) {
		.searchBorder{
			width: calc(100% - 10rem);
			margin: 10rem auto 0;
			height: 4.5rem;
			border: 1px solid rgba(0, 0, 0, 0.2);
			font-weight: 400;
			color: #000;
			border-radius: 2.25rem;
			display: flex;
			align-items: center;
		}
		.shopInfo{
			width: calc(100% - 10rem);
			margin: 5rem auto 0;
		}
		.infos{
			width: calc(100% - 10rem);
			margin: 1rem auto 0;
			display: flex;
			align-items: center;
			gap: 3rem;
		}
		.alj{
			width: calc(100% - 10rem);
			margin: 1rem auto 0;
			display: flex;
			align-items: center;
			gap: 1.5rem 3rem;
		}
	}
</style>